Styling Built-In Editors

In previous steps we’ve seen how to add new editors to the property grid. The property grid also includes a number of built-in editors, which you can use as is or customise using the normal Windows Presentation Foundation styling mechanism.

Choosing a Built-In Editor

One of the built-in editors provided by the property grid is a numeric up-down control. In the Person example, this might be appropriate for the Age property. To tell the property grid to use this editor for the Age property, specify a property editor in the usual way, but set the EditorTemplate to the resource key of the built-in NumericUpDownEditor:

CopyTelling the property grid to use a builtin editor for Age
<ms:PropertyEditor PropertyName='Age' DeclaringType='{x:Type t:Person}' EditorTemplate='{StaticResource {x:Static ms:PropertyGrid.NumericUpDownEditorKey}}'>
          <ms:PropertyEditor.Style>
            <Style TargetType='{x:Type ms:NumericUpDown}'>
              <Setter Property='Minimum' Value='1'/>
              <Setter Property='Maximum' Value='150'/>
            </Style>
          </ms:PropertyEditor.Style>
        </ms:PropertyEditor>

Styling a Built-In Editor

The example above shows a simple use of the PropertyEditor Style property to configure a built-in editor. In this case, it is a basic functional customisation of the range of the numeric up-down control. However, the WPF styling system allows much more extensive customisation. In the following example, we assign the built-in check box editor to the Has Work Permit property, and replace the default CheckBox template to achieve a distinctive visual effect:

CopyUsing a customised checkbox editor for HasWorkPermit
<ms:PropertyEditor PropertyName='HasWorkPermit' DeclaringType='{x:Type t:Person}' EditorTemplate='{StaticResource {x:Static ms:PropertyGrid.CheckBoxEditorKey}}'>
          <ms:PropertyEditor.Style>
            <Style TargetType='{x:Type CheckBox}'>
              <Setter Property='Template'>
                <Setter.Value>
                  <ControlTemplate TargetType='{x:Type CheckBox}'>
                    <StackPanel Orientation='Horizontal'>
                      <Border x:Name='YesBorder' CornerRadius='3' BorderThickness='1' Margin='2' IsHitTestVisible='False' Padding='2' BorderBrush='Blue'>
                        <Border.Background>
                          <LinearGradientBrush StartPoint='0,0' EndPoint='0,1'>
                            <GradientStop Offset='0' Color='AliceBlue'/>
                            <GradientStop Offset='1' Color='Aquamarine'/>
                          </LinearGradientBrush>
                        </Border.Background>
                        <TextBlock x:Name='YesText' FontWeight='Bold' Foreground='Black'>YES</TextBlock>
                      </Border>
                      <Border x:Name='NoBorder' CornerRadius='3' BorderThickness='1' Margin='2' Padding='2' BorderBrush='Red'>
                        <Border.Background>
                          <LinearGradientBrush StartPoint='0,0' EndPoint='0,1'>
                            <GradientStop Offset='0' Color='LightPink'/>
                            <GradientStop Offset='1' Color='MediumVioletRed'/>
                          </LinearGradientBrush>
                        </Border.Background>
                        <TextBlock x:Name='NoText' FontWeight='Bold' Foreground='Transparent'>NO</TextBlock>
                      </Border>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                      <Trigger Property='IsChecked' Value='False'>
                        <Setter TargetName='YesText' Property='Foreground' Value='Transparent'/>
                        <Setter TargetName='NoText' Property='Foreground' Value='White'/>
                        <Setter TargetName='YesBorder' Property='IsHitTestVisible' Value='True'/>
                        <Setter TargetName='NoBorder' Property='IsHitTestVisible' Value='False'/>
                      </Trigger>
                    </ControlTemplate.Triggers>
                  </ControlTemplate>
                </Setter.Value>
              </Setter>
            </Style>
          </ms:PropertyEditor.Style>
        </ms:PropertyEditor>

Theming

The PropertyEditor Style property allows you to customise the appearance and user interaction of built-in editors, but a PropertyEditor affects only one property. If your application has its own distinct visual style, and you want the property grid to adhere to this visual style, you probably do not want to have to set up a PropertyEditor for every conceivable property.

For this situation, the property grid control offers a BuiltInEditorStyles property. Styles defined here apply to all uses of the built-in editors. This makes it possible to fully theme the PropertyGrid control (typically in conjunction with a custom style for the control itself). This is not covered in this walkthrough: see the Templating sample for an illustration of how to do this.

See 05_StylingBuiltInEditors.xaml in the PropertyGridCustomization project.

Next step: Adding Custom Nodes